<template>
  <div class="carousel">
    <!-- 卡片化标签页开始 -->
    <el-tabs type="border-card" v-model="activeName" @tab-click="addcarousel">
      <!-- 轮播图管理开始 -->
      <el-tab-pane label="轮播图首页" name="first"
        ><template>
          <el-table :data="tableData" style="width: 100%">
            <!-- 序号 -->
            <el-table-column prop="id" label="序号" align="center" width="100">
            </el-table-column>
            <!-- 名称 -->
            <el-table-column
              prop="name"
              label="名称"
              align="center"
              width="180"
            >
            </el-table-column>
            <!-- 图片 -->
            <el-table-column label="图片" align="center">
              <template slot-scope="scope">
                <el-image
                  style="width: 40px; height: 40px"
                  :src="scope.row.url"
                  :preview-src-list="[scope.row.url]"
                />
              </template>
            </el-table-column>
            <!-- 描述 -->
            <el-table-column prop="introduce" label="描述" align="center">
            </el-table-column>
            <!-- 状态 -->
            <el-table-column prop="status" label="状态" align="center">
              <template slot-scope="scope">
                <div class="name-wrapper">
                  <el-tag v-if="scope.row.status == '正常'" size="medium">{{
                    scope.row.status
                  }}</el-tag>
                  <el-tag
                    v-else
                    size="medium"
                    style="
                      background-color: #fcebea;
                      border-color: #fab6b2;
                      color: #f94f45;
                    "
                    >{{ scope.row.status }}</el-tag
                  >
                </div>
              </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="editcarousel(scope.row)"
                >
                  编辑
                </el-button>

                <el-button
                  style="color: red"
                  type="text"
                  size="small"
                  @click="open(scope.row.id)"
                  >删除</el-button
                >
                <el-button
                  v-if="scope.row.status == '正常'"
                  style="color: grey"
                  type="text"
                  size="small"
                  @click="
                    updateForm(
                      scope.row.id,
                      '停用',
                      scope.row.name,
                      scope.row.introduce,
                      scope.row.url
                    )
                  "
                  >停用</el-button
                >
                <el-button
                  v-else
                  style="color: blue"
                  type="text"
                  size="small"
                  @click="
                    updateForm(
                      scope.row.id,
                      '正常',
                      scope.row.name,
                      scope.row.introduce,
                      scope.row.url
                    )
                  "
                  >启用</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-tab-pane>
      <!-- 轮播图管理结束 -->
      <!-- 添加轮播图开始 -->
      <el-tab-pane label="轮播图管理" name="second">
        <!-- 标题 -->
        <div class="edit-Sildeshow-Title">{{ SlideshowTitle }}</div>
        <!-- 分割线 -->
        <div class="partingLine"></div>
        <!-- 表单开始 -->
        <el-form
          ref="carousel_form"
          :model="carouselForm"
          :rules="rules"
          label-width="80px"
        >
          <!-- 产品名称 -->
          <el-form-item label="名称" prop="name">
            <el-input v-model="carouselForm.name" />
          </el-form-item>
          <!-- 图片 -->
          <el-form-item label="图片上传" prop="url">
            <el-upload
              class="avatar-uploader"
              :action="uploadFileURL"
              :show-file-list="false"
              :on-success="handleSuccess"
              :before-upload="beforeUpload"
            >
              <img v-if="imageUrl" :src="carouselForm.url" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>
          <!-- 描述 -->
          <el-form-item label="描述" prop="introduce">
            <el-input v-model="carouselForm.introduce" />
          </el-form-item>
        </el-form>
        <!-- 底部操作按钮区域 -->
        <el-button type="info" @click="dialogClose">取 消</el-button>
        <el-button type="success" @click="submitForm">确 定</el-button>
        <!-- 表单结束 -->
      </el-tab-pane>
      <!-- 添加轮播图结束 -->
      <!-- 轮播图预览开始 -->
      <el-tab-pane label="轮播图预览" name="third" style="height: 555px; background-color: #f3f3f3;">
        <el-carousel indicator-position="outside" class="bigPhoto">
          <el-carousel-item v-for="item in tableData" :key="item.id" class="photoView">
            <el-image
              style="width: 100%; height: 100%"
              :src="item.url"
              :preview-src-list="[item.url]"
            />
          </el-carousel-item> </el-carousel
      ></el-tab-pane>
      <!-- 轮播图预览结束 -->
    </el-tabs>
    <!-- 卡片化标签页结束 -->
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import { showFileURL, uploadFileURL } from "@/utils/config";
export default {
  data() {
    return {
      // 轮播图数据
      tableData: [],
      // 跳转页面名称
      activeName: "first",
      // 添加轮播图标题
      SlideshowTitle: "添加轮播图",

      // 上传文件的服务器地址
      uploadFileURL,
      // 图片路径
      imageUrl: "",
      // 表单对象
      carouselForm: {
        // 产品名称
        name: "",
        // 描述
        introduce: "",
        // 图片
        url: "",
        // 删除提示框
        centerDialogVisible: false,
      },
      // 表单校验规则
      rules: {
        // 产品名称
        name: [{ required: true, message: " 请输轮播图名称", trigger: "blur" }],
        url: [{ required: true, message: "未添加图片" }],
      },
    };
  },
  methods: {
    // 停用启用
    updateForm(id, status, name, introduce, url) {
      const data = {
        id,
        status,
        name,
        introduce,
        url,
      };
      post("/carousel/saveOrUpdate", data).then((res) => {
        // 自动的获取产品数据
        this.findAllSlideshow();
      });
    },
    // 查询所有轮播图数据
    findAllSlideshow() {
      get("/carousel/findAll").then((res) => {
        this.tableData = res.data;
      });
    },
    // 跳转到添加轮播图界面
    pushHandler() {
      this.activeName = "second";
    },
    // 图片上传之前 要做的一些限制
    beforeUpload(file) {
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isLt3M) {
        this.$message.error("上传头像图片大小不能超过 3MB!");
      }
    },
    // 添加轮播图
    addcarousel() {
      // 清空表单对象
      this.carouselForm = {};
      // 将imageUrl 置空
      this.imageUrl = "";
      // 设置模态框的标题
      this.SlideshowTitle = "添加轮播图";
    },
    // 编辑轮播图row
    editcarousel(row) {
      this.carouselForm = { ...row };
      // 预览图片 地址赋值
      this.imageUrl = this.carouselForm.url;
      // 设置模态框的标题
      this.SlideshowTitle = "编辑轮播图";
      // 跳转到编辑页面
      this.activeName = "second";
    },
    // 图片上传成功之后 调用方法
    handleSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      // 上传成功之后 更新carouselForm.val的路径
      this.carouselForm.url = showFileURL + res.data.id;
    },
    // 提交表单
    submitForm() {
      this.$refs["carousel_form"].validate((valid) => {
        if (valid) {
          // 发送表单验证的请求 提交表单对象
          post("/carousel/saveOrUpdate", this.carouselForm).then((res) => {
            // 给用户一个成功的提示
            if (res.status == 200) {
              this.$message({
                message: res.message,
                type: "success",
              });
              // 重新刷新页面的数据
              this.findAllSlideshow();
              // 调用关闭模态框的方法
              this.dialogClose();
            } else {
              this.$message.error(res.message);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 返回轮播图管理界面 调用表单重置的方法
    dialogClose() {
      // 重置表单
      this.$refs["carousel_form"].resetFields();
      // 关闭模态框
      setTimeout(() => {
        this.activeName = "first";
      }, 300);
    },
    // 删除操作
    open(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.deletecarousel(id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 删除轮播图
    deletecarousel(id) {
      // 发送上架请求
      get("/carousel/deleteById", { id }).then((res) => {
        // 给用户一个成功或失败的提示
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: "success",
          });
          // 重新刷新页面的数据
          this.findAllSlideshow();
        } else {
          this.$message.error(res.message);
        }
        this.centerDialogVisible = false;
      });
    },
  },
  created() {
    this.findAllSlideshow();
  },
};
</script>

<style scoped>
.edit-Sildeshow-Title {
  line-height: 50px;
  color: #888;
  font-weight: bold;
  font-size: 18px;
  margin-left: 10px;
}
.partingLine {
  width: 99%;
  height: 2px;
  background-color: #f3f3f3;
  margin: 0 auto;
  margin-bottom: 30px;
}
.bigPhoto{
  width: 60%;
  margin-left: 20%;
  height: 100%;
  padding-top: 4%;
}
.photoView{
  width: 100%;
  height: 150%;
}
</style>